<template>
  <div class="pd30 produceFactory">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>电梯消毒管理</div>
        <!-- <el-button class="addBtn fw defaultbtn"  type="primary">添加</el-button> -->
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="groupbtn flex">
            <el-input clearable v-model="queryParam.rescueCode" class="query-input m-r-15" placeholder="救援代码" />
            <el-input clearable v-model="queryParam.registerCode" class="query-input m-r-15" placeholder="电梯注册代码" />
            <el-button @click="queryHandle" type="primary" >查询</el-button>
            <el-button class="defaultbtn" type="primary" @click="handleExportExcel"><i class="iconfont icon-wenjiandaochu" />导出</el-button>
          </div>
        </div>
        
        <el-table
          id="dataList"
          ref="dataList"
          class="con-table"
          type="expand"
          :data="dataList"
          @select="handleCheck" 
          @select-all="handleCheck" 
          @selection-change="handleCheckChange"
        >
          <el-table-column width="50"  type="selection" label="全选" />

          <el-table-column  align="center" label="电梯代码">
            <template slot-scope="scope">
              <span>{{ scope.row.registerCode }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="安装地址">
            <template slot-scope="scope">
              <span>{{ scope.row.installAddress }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="使用单位">
            <template slot-scope="scope">
              <span>{{ scope.row.usePlaceName }}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="维保单位">
            <template slot-scope="scope">
              <span>{{ scope.row.maintenance }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="消毒时间">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="电梯厂家">
            <template slot-scope="scope">
              <span>{{ scope.row.factory }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="紫外光消毒">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.disinfect" type="success" effect="dark">已消毒</el-tag>
              <el-tag v-else type="warning" effect="dark">未启用</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" label="消毒视频文件">
            <template slot-scope="scope">
              <span>{{ scope.row.video }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="播放列表">
            <template slot-scope="scope">
              <span>{{ scope.row.list }}</span>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination
          class="paginationWrap flex"
          :current-page="paging.currentPage"
          :page-sizes="paging.pageSizeArr"
          :page-size="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { elevatorQueryList } from '@/api/elevator/elevator'
import { fetchProDelete } from '@/api/operation/BOM/opBomProduct'
import { showNotice, formatDateTime } from '@/utils/toolclass'
import { export_json_to_excel } from '@/excel/Export2Excel'

export default {
  name: 'elevatorClear',
  props: {},
  data() {
    return {
      delPro:'',
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },
      dataList:[
        {
          registerCode:'31104301112016050001',
          installAddress:'绿地之窗9栋1单元左梯',
          usePlaceName:'成都嘉诚新悦物业管理集团有限公司长沙分公司',
          maintenance:'长沙顺新电梯有限公司',
          time:'2020-02-25 7:39',
          factory:'上海三菱电梯有限公司',
          disinfect:true,
          video:'zk2020020256.mp4',
          list:'视频播放'
        },
        {
          registerCode:'31104301112016050002',
          installAddress:'鸿铭中心9栋1单元',
          usePlaceName:'长沙鸿铭中心物业管理有限公司鸿铭中心管理处',
          maintenance:'长沙市通特设备工程有限公司',
          time:'2020-02-25 7:21',
          factory:'上海三菱电梯有限公司',
          disinfect:true,
          video:'zk2020020254.mp4',
          list:'视频播放'
        },
        {
          registerCode:'31104301112016050003',
          installAddress:'鸿铭中心2栋1单元',
          usePlaceName:'长沙鸿铭中心物业管理有限公司鸿铭中心管理处',
          maintenance:'长沙市通特设备工程有限公司',
          time:'2020-02-24 16:17',
          factory:'上海三菱电梯有限公司',
          disinfect:false,
          video:'zk2020020251.mp4',
          list:'视频播放'
        }
      ],
      queryParam: {
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSystemList()
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/intelligentVillage/elevatorCheck/elevatorClear/index' }))
  },
  methods: {
    queryHandle(){
      this.dataList.filter(item=>{
        
      })
    },
    handleCheck(selection, row) {
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.row = row
        this.delPro = row
      }
    },
    // 导出
    handleExportExcel() {
      const tHeader = ['电梯代码', '安装地址', '使用单位', '维保单位', '消毒时间', '电梯厂家', '紫外光消毒', '消毒视频文件', '播放列表']
      const filterVal = ['code', 'address', 'usePlaceName', 'maintenance', 'time', 'factory', 'disinfect', 'video', 'list']
      const data = this.formatJson(filterVal, this.dataList)
      export_json_to_excel(tHeader, data, '电梯消毒管理列表(' + formatDateTime().ymd) + ')'
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    handleSearch(name) {
      if (this.queryParam.name === '') {
        this.getSystemList()
      }
    },
    getSystemList() {
      const params = [3, '', '', this.paging.currentPage, this.paging.pageSize, this.queryParam.registerCode, '', this.queryParam.rescueCode, '']
      elevatorQueryList(...params).then((res) => {
        if (res.code === '000000') {
          // this.dataList = res.data
          // const i = res.data.map((item, i) => i)
          // this.paging.total = i.length
        }
      })
      this.paging.total = this.dataList.length
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getSystemList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getSystemList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/public.scss';
.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.sys-input {
  width: 260px;
}
.icon-qingkong:before {
  margin-right: 4px;
}
</style>


